<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <title>Document</title>
</head>
<style>
  .banner{
   max-width: 400px;
    margin: 0 auto;
  }
  *{
    margin:0px;
    padding:0px;
  }
  body{
    background:#eee;
  }
  .clearfix:after{
    display:table;
    clear:both;
    content:"";
  }
  .fl{
    float:left;
  }
  .fr{
    float:right;
  }
  .w50{
    width:50%;
  }
  .tc{
    text-align:center;
  }
  .wechatpay{
    padding-bottom:5%;
  }
  .money_nav{
    border-radius:10px;
    height:150px;
    margin:3%;
    background:rgb(42,173,103);
    margin-bottom:1.5%;
  }
  .sr_money,.package{
    padding-top:70px;
    color:white;
    background:url('img/sr_money.png') no-repeat center 35px;
    background-size:20%;
  }
  .package{
    background:url('img/money.png') no-repeat center 35px;
    background-size:20%;
  }
  .money{
    font-size:14px;
    margin-top:3px;
    color:rgba(255,255,255,0.6);
  }
  .grid{
    
    margin:3%;
    margin-bottom:1.5%;
    border-radius:10px;
    background:white;
  }
  .grid h3{
    height:50px;
    line-height:50px;
    padding-left:15px;
    font-size:12px;
    color:#999;
    font-weight:400;
  }
  .item{
    width:33.33%;
    float:left;
    height:100px;
    text-align:center;
    font-size:12px;
    color:#333;
    padding-top:60px;
    box-sizing:border-box;
    border-top:1px solid #eee;
    background:url('img/mobile.png') no-repeat center 20px;
    background-size:30%;
  }
  .card{
    background:url('img/card.png') no-repeat center 20px;
    background-size:30%;
  }
  .chongzhi{
    background:url('img/shoujichongzhi.png') no-repeat center 20px;
    background-size:30%;
  }
  .licaitong{
    background:url('img/licaitong.png') no-repeat center 20px;
    background-size:30%;
  }
  .xinbake{
    background:url('img/xinbake.png') no-repeat center 20px;
    background-size:30%;
  }
    .fangdai{
    background:url('img/fangdai.png') no-repeat center 20px;
    background-size:30%;
  }
  .erweima{
    background:url('img/erweima.png') no-repeat center 20px;
    background-size:30%;
  }
  .shenghuojiaofei{
    background:url('img/shenghuojiaofei.png') no-repeat center 20px;
    background-size:30%;
  }
  .qq{
    background:url('img/qq.png') no-repeat center 20px;
    background-size:30%;
  }
  .city{
    background:url('img/city.png') no-repeat center 20px;
    background-size:30%;
  }
  .tengxungongyi{
    background:url('img/tengxungongyi.png') no-repeat center 20px;
    background-size:30%;
  }
  .yiliaojiankang{
    background:url('img/yiliaojiankang.png') no-repeat center 20px;
    background-size:30%;
  }
  .huochepiao{
    background:url('img/huochepiao.png') no-repeat center 20px;
    background-size:30%;
  }
  .didi{
    background:url('img/didi.png') no-repeat center 20px;
    background-size:30%;
  }
  .jd{
    background:url('img/jd.png') no-repeat center 20px;
    background-size:30%;
  }
  .mt{
    background:url('img/mt.png') no-repeat center 20px;
    background-size:30%;
  }
  .my{
    background:url('img/my.png') no-repeat center 20px;
    background-size:30%;
  }
  .chwl{
    background:url('img/chwl.png') no-repeat center 20px;
    background-size:30%;
  }
  .jiud{
    background:url('img/jiud.png') no-repeat center 20px;
    background-size:30%;
  }
  .pdd{
    background:url('img/pdd.png') no-repeat center 20px;
    background-size:30%;
  }
  .mgj{
    background:url('img/mgj.png') no-repeat center 20px;
    background-size:30%;
  }
  .item:nth-of-type(3n){
    border-left:1px solid #eee;
  }
  .item:nth-of-type(3n-2){
    border-right:1px solid #eee;
  }
  </style>
<body>
  <div class="banner">
    <a href="index.html">作业一</a>
    <a href="homework.html">作业二</a>
    <div class="wechatpay">

      <div class="money_nav clearfix">
        <div class="sr_money fl w50 tc">收付款</div>
        <div class="package fl w50 tc">
           <div>钱包</div>
           <div class="money">&yen;99999999.00</div>
        </div>
      </div>
    
      <div class="grid tencent_service clearfix">
        <h3>腾讯服务</h3>
        <div class="item card">信用卡还款</div>
        <div class="item chongzhi">手机充值</div>
        <div class="item licaitong">理财通</div>
        <div class="item shenghuojiaofei">生活缴费</div>
        <div class="item qq">Q 币充值</div>
        <div class="item city">城市服务</div>    
        <div class="item tengxungongyi">腾讯公益</div>
        <div class="item yiliaojiankang">信用卡还款</div>
        <div class="item fangdai">房贷</div>
      </div>
    
      <div class="grid tuiguang clearfix">
        <h3>限时推广</h3>
        <div class="item erweima">健康码防疫</div>
        <div class="item xinbake">星巴克</div>
        <div class="item" style="background:none"></div>
      </div>
    
     <div class="grid third clearfix">
        <h3>第三方服务</h3>
        <div class="item huochepiao">火车票机票</div>
        <div class="item didi">滴滴出行</div>
        <div class="item jd">京东购物</div>
        <div class="item mt">美团外卖</div>
        <div class="item my">电影票</div>
        <div class="item chwl">吃喝玩乐</div>    
        <div class="item jiud">酒店</div>
        <div class="item pdd">拼多多</div>
        <div class="item mgj">蘑菇街</div>
      </div>
    </div>
  </div>

</body>
</html>